<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link rel="stylesheet" th:href="@{/asserts/bootstrap4/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/asserts/css/QuestionForm.css}">
    <script th:src="@{/asserts/js/echarts.min.js}"></script>
    <script th:src="@{/asserts/js/echarts-wordcloud.min.js}"></script>
</head>
<style type="text/css">
    .echarts{
        padding-left: 0px;
        margin:auto;
    }
    .formCount{
        text-align: center;
    }
    .formCount_num{
        font-weight: bold;
    }
    .person_detail{
        padding-left: 8%;
    }
    .person_detail:hover{
        background: #7abaff;
        box-shadow: 0px 0px 1px 1px gray;
    }
</style>
<body>
<div class="container">
    <div class="questionForm" style="opacity:1;">
        <div class="formTitle">

        </div>

        <div class="formMsg">
            <div class="formCount">
                本问卷共收到 <span class="formCount_num"></span> 份表单
            </div>
        </div>
        <hr/>
        <div class="content">

        </div>

        <!--题目模板-->
        <div class="content_model">
            <!--单选模板-->
            <div class="Component oneChoose">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(单选题)</span>
                </div>
                <div class="com_content echarts" style="width: 100%;height: 400px;">

                </div>
            </div>

            <!--多选模板-->
            <div class="Component moreChoose">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(多选题)</span>
                </div>
                <div class="com_content echarts" style="width: 100%;height: 400px;">

                </div>
            </div>

            <!--单行文本模板-->
            <div class="Component oneLineText">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(单行)</span>
                </div>
                <div class="com_content echarts" style="width: 100%;height: 250px;">

                </div>
            </div>

            <!--多行文本模板-->
            <div class="Component moreLineText">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(多行)</span>
                </div>
                <div class="com_content echarts" style="width: 100%;height: 250px;">

                </div>
            </div>

            <!--人员推荐模板-->
            <div class="Component recommendPerson">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(人员推荐)</span>
                </div>
                <div class="com_content echarts" style="width: 100%;;height: 400px;">

                </div>
                <div class="recommendPerson_details">

                </div>
            </div>
            <div class="person_detail">

            </div>

        </div>

    </div>
</div>
</body>
<script th:src="@{/asserts/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/asserts/js/popper.min.js}"></script>
<script th:src="@{/asserts/bootstrap4/js/bootstrap.js}"></script>
<script th:src="@{/asserts/js/canvas-nest.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
$(document).ready(function () {
    var charts = [];
    var charts_div = [];
    var data = [[${data}]];
    var id = data.id;
    var title = data.title;
    var formcount = data.formcount;
    var starttime = data.starttime;
    var finishtime = data.finishtime;
    $(".formTitle").text(title);
    $(".formCount_num").text(formcount);

    var content = data.content;
    var maskImage = new Image();
    maskImage.src = "/asserts/img/mask.png";
    maskImage.onload = function () {
        for (var i = 0;i < content.length;i ++){
            var type = content[i].type;
            var content_title = content[i].title;

            // 生成对应模板
            var model = $(".content_model").children("."+type).clone(true);
            model.find(".com_num").text((i+1)+"、");
            model.find(".com_title").text(content_title);

            // 对应处理
            switch (type) {
                case "oneChoose":
                case "moreChoose":
                    // echarts挂载div
                    var $echarts_area = model.find(".com_content");
                    if ($(window).width()<800) {
                        $echarts_area[0].style.width = "350px";
                    }else{
                        $echarts_area[0].style.width = "600px";
                    }
                    var Choose_echarts = echarts.init($echarts_area[0]);

                    // 构造数据
                    var amount = content[i].amount;
                    var data = [];
                    for (var j = 0;j < amount.length;j ++){
                        var oneoption = {};
                        oneoption.name = amount[j].option;
                        oneoption.value = amount[j].count;
                        data.push(oneoption);
                    }
                    Choose_echarts.setOption({
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        series : [
                            {
                                name: '选项',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '50%'],
                                data:data,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    normal:{
                                        label:{
                                            show:true,
                                            formatter:'{b} : {c} ({d}%)'
                                        },
                                        labelLine:{
                                            show:true
                                        }
                                    }
                                }
                            }
                        ]
                    });
                    charts.push(Choose_echarts);
                    charts_div.push($echarts_area[0]);
                    $(".content").append(model);
                    break;
                case "oneLineText":
                case "moreLineText":
                    // 挂载div
                    var $echarts_area = model.find(".com_content");
                    if ($(window).width()<800) {
                        $echarts_area[0].style.width = "350px";
                    }else{
                        $echarts_area[0].style.width = "600px";
                    }
                    var Text_echarts = echarts.init($echarts_area[0]);

                    // 获取数据
                    var wordsCount = content[i].wordsCount;

                    var Text_data = [];
                    Object.keys(wordsCount).forEach(function (key) {
                        var onedata = {
                            name:key,
                            value:wordsCount[key]
                        };
                        Text_data.push(onedata);
                    });
                    Text_echarts.setOption({
                        tooltip: {
                            show: false
                        },
                        series: [{
                            type: 'wordCloud',
                            gridSize: 1,
                            sizeRange: [22, 55],
                            rotationRange: [-45, 90],
                            // shape:"circle",
                            maskImage: maskImage,
                            autoSize: {
                                enable: true,
                                minSize: 22
                            },
                            textStyle: {
                                normal: {
                                    color: function () {
                                        return 'rgb(' +
                                            Math.round(Math.random() * 255) +
                                            ', ' + Math.round(Math.random() * 255) +
                                            ', ' + Math.round(Math.random() * 255) + ')'
                                    },
                                    emphasis: {
                                        fontWeight:'bolder',
                                        fontSize:30,
                                        color: '#00467A'
                                    }
                                }
                            },
                            left: 'center',
                            top: 'center',
                            width: '96%',
                            height: '100%',
                            right: null,
                            bottom: null,
                            // width: 300,
                            // height: 200,
                            // top: 20,
                            data: Text_data
                        }]
                    });

                    charts.push(Text_echarts);
                    charts_div.push($echarts_area[0]);
                    $(".content").append(model);
                    break;
                case "recommendPerson":
                    var person_details = model.find(".recommendPerson_details");
                    var details_data = content[i].personDetails;
                    for(var count = 0;count < details_data.length;count ++){
                        var oneDetail = details_data[count];
                        var one_div = $(".person_detail").clone(true);
                        one_div.text(oneDetail.major_name+"-"+oneDetail.stu_id+"-"+oneDetail.stu_name);
                        person_details.append(one_div);
                    }

                    // echarts挂载div
                    var $echarts_area = model.find(".com_content");
                    if ($(window).width()<800) {
                        $echarts_area[0].style.width = "350px";
                    }else{
                        $echarts_area[0].style.width = "600px";
                    }
                    var recommendPerson_echarts = echarts.init($echarts_area[0]);

                    // 构造数据
                    var data_name = [];
                    var data_count = [];
                    var amount = content[i].amount;
                    for (var k = 0;k < amount.length;k ++){
                        var key = Object.keys(amount[k])[0];
                        data_name.unshift(key.replace("-","\n"));
                        data_count.unshift(amount[k][key]);
                    }
                    recommendPerson_echarts.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value'
                        },
                        yAxis: {
                            type: 'category',
                            data: data_name
                        },
                        series: [
                            {
                                name: '推荐数',
                                type: 'bar',
                                data: data_count
                            }
                        ]
                    });
                    charts.push(recommendPerson_echarts);
                    charts_div.push($echarts_area[0]);
                    $(".content").append(model);
                    break;
            }

        }
        for (var i = 0;i < charts_div.length;i ++){
            charts_div[i].style.width = "100%";
        }
        setTimeout(function () {
            window.onresize = function () {
                for (var i = 0;i < charts.length;i ++) {
                    charts[i].resize();
                }
            };
        },100);
    };

});
</script>